<template>
  <el-card>
    <header-search :btn-show="false" @Search="onSearch" />
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      border
    >
      <el-table-column
        type="index"
        label="#"
        width="40"
        align="center"
      />
      <el-table-column
        prop="order_number"
        label="订单编号"
        width="250"
      />
      <el-table-column
        prop="order_price"
        label="订单价格"
      />
      <el-table-column
        label="是否付款"
      >
        <template slot-scope="{row}">
          <el-button v-if="row.pay_status-0" size="mini" type="success" plain>已付款</el-button>
          <el-button v-else size="mini" type="danger" plain>未付款</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="is_send"
        label="是否发货"
      />
      <el-table-column
        label="下单时间"
      >
        <template slot-scope="{row}">
          {{ row.create_time | parseTime }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="editOrder(row)" />
          <el-button size="mini" type="success" icon="el-icon-location-outline" @click="logisticsShow" />
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="query.pagenum"
      :page-sizes="[5, 10, 15, 40]"
      :page-size="query.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!--    修改订单地址弹层-->

    <el-dialog
      v-if="dialogOrderVisible"
      title="修改地址"
      :visible.sync="dialogOrderVisible"
      width="50%"
    >
      <el-form ref="form" :model="address" :rules="rules" label-width="100px">
        <el-form-item label="省市区/县" prop="city">
          <el-cascader
            v-model="address.city"
            :options="cityOptions"
            placeholder="请选择"
            :props="{ expandTrigger: 'hover' }"
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="info">
          <el-input v-model="address.info" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogOrderVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <!--    查看物流弹层-->
    <el-dialog
      title="物流进度"
      :visible.sync="infoDialogVisible"
      width="50%"
    >
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="(item, index) in LogisticsInformation"
          :key="index"
          :timestamp="item.time"
          :type="item.type"
        >
          {{ item.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </el-card>
</template>

<script>
import { getOrderList, getLogisticsInformation } from '@/api/orders'
import HeaderSearch from '@/components/HeaderSearch/HeaderSearch'
import cityOptions from '@/api/constant/citys'
export default {
  name: 'Index',
  components: { HeaderSearch },
  data() {
    return {
      tableData: [],
      total: 0,
      query: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      infoDialogVisible: false,
      LogisticsInformation: [],
      dialogOrderVisible: false,
      cityOptions: cityOptions,
      address: {
        city: '',
        info: ''
      },
      rules: {
        info: [
          { required: true, message: '请输入信息地址', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请选择', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  created() {
    this.loadOrdersList()
    this.loadLogisticsInformation()
  },
  methods: {
    async loadOrdersList() {
      const res = await getOrderList(this.query)
      this.tableData = res.goods
      this.total = res.total
    },
    onSearch(value) {
      this.query.pagenum = 1
      this.query.query = value
      this.loadOrdersList()
    },
    handleSizeChange(val) {
      this.query.pagesize = val
      this.loadOrdersList()
    },
    handleCurrentChange(val) {
      this.query.pagenum = val
      this.loadOrdersList()
    },
    async loadLogisticsInformation(id) {
      this.LogisticsInformation = await getLogisticsInformation()
      this.LogisticsInformation[0].icon = 'el-icon-s-flag'
      this.LogisticsInformation[0].type = 'success'
    },
    logisticsShow() {
      this.infoDialogVisible = true
      this.loadLogisticsInformation()
    },
    editOrder(row) {
      this.dialogOrderVisible = true
    }
  }
}
</script>

<style scoped>

</style>
